<template>
  <!-- 基本信息 -->
  <collapse-wrap title="基本信息">
    <div class="base">

      <el-card class="base_one" shadow="always">
        <!-- 基本信息展示 -->
        <ul class="infoList">
          <li v-for="(item, i) in leftInfoList" :key="i" v-show="item.show">
            <span class="title">{{item.title}}</span>
            <span class="content">{{item.value}}</span>
          </li>
          <li>
<!--            <el-button :disabled="disabled" type="primary" size="small" @click="$emit('getInfo')"  style="background:#1990FE">设备信息</el-button>-->
          </li>
        </ul>
        <ul class="infoList">
          <li v-for="(item, i) in rightInfoList" :key="i" v-show="item.show">
            <span class="title">{{item.title}}</span>
            <span class="content">{{item.value}}</span>
          </li>
        </ul>
      </el-card>

      <!-- 图片遍历 -->
      <el-card
        shadow="always"
        class="base_img"
        :body-style="{ padding: '0px' }"
        v-for="(item, index) in imgList"
        :key="item.url">
        <!-- <el-image class="base_img-item" @click="previewImg(index)" :src="item.url" fit="cover"></el-image> -->
        <el-image class="base_img-item" @click="previewImg(index)" :src="item.url"></el-image>
        <div class="base_img-name">
          {{item.name}}
        </div>
        <div class="base_img-time flex-between">
          <em>{{item.shotTime | formatTimer}}</em>
          <el-button size="mini" type="text" @click="previewImg(index)">查看大图</el-button>
        </div>
      </el-card>
    </div>

    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>

  </collapse-wrap>
</template>

<script>
import CollapseWrap from '@/components/collapse-wrap'
import { store } from '../../work-point.store'
import Format from '@/utils/format'
import constUrl from '@/services/env'
import PictureViewer from '@/components/picture-viewer'

export default {
  props: ['info','disabled'],
  components: { CollapseWrap, PictureViewer },
  data () {
    return {
      equipId:'',
      leftInfoList:[],
      rightInfoList:[],
      imgList:[],
    }
  },
  filters: {
    // 时间格式化
    formatTimer (timer) {
      return Format(new Date(timer), 'yyyy-MM-dd')
    },
  },
  computed: {
  },
  methods: {
    infoHandel(){
      const {workPointId} = this.$route.params;
      const info = store.workPointList.find((x) => x.id === workPointId) || {};
      this.imgList = info.imgArrList?.map(x => ({ ...x, url: constUrl + x.url })) || []
      let showSlopeInfo = true
      if (!info.slopeInfo || !info.slopeInfo.slopeNo) {
        info.slopeInfo = {}
        showSlopeInfo = false
      }
      let leftInfoList = [
        {title: "名称", value: info.name || "-", show:true},
        {title: "边坡编号", value: info.slopeInfo.slopeNo || "-", show: showSlopeInfo,},
        {title: "行政区", value: info.area || "-", show:true},
        { title: '起止时间', value: Format(new Date(info.startTime), 'yyyy年MM月dd日') + '~' +  Format(new Date(info.endTime), 'yyyy年MM月dd日') || '-',show:true },
        {title: "经纬度", value: info.longitude + "，" + info.latitude || "-", show:info.longitude},
        {title: "起止桩号", value: info.slopeInfo.startStoke + "~" + info.slopeInfo.endStoke || "-", show: showSlopeInfo,},
      ]
      let rightInfoList = [
        {title: "边坡高度", value: info.slopeInfo.height + 'm' || "-", show: showSlopeInfo,},
        {title: "边坡长度", value: info.slopeInfo.slopeLength + 'm' || "-", show: showSlopeInfo,},
        {title: "边坡位置", value: info.slopeInfo.positionName || "-", show: showSlopeInfo,},
        {title: "边坡类型", value: info.slopeInfo.slopeTypeName || "-", show: showSlopeInfo,},
        {title: "所在道路类型", value: info.slopeInfo.slopeSlideTypeName || "-", show: showSlopeInfo,},
      ]
      this.leftInfoList = leftInfoList
      this.rightInfoList = rightInfoList
    },
    // 查看大图
    previewImg (index) {
      this.$refs.imageViewer.showViewer(this.imgList.map(x => x.url), index)
    },
  }
}
</script>

<style lang="less" scoped>
  .base {
    display: flex;
    overflow-x: auto;
    padding-bottom: 6px;
    & > * {
      flex-shrink: 0;
    }
    .base_one {
      margin-right: 20px;
      /deep/.el-card__body {
        display: flex;
      }
      &:last-child {
        margin-right: 20px;
      }
    }

    .infoList {
      max-width: 340px;
      li {
        display: flex;
        line-height: 18px;
        font-size: 16px;
        margin-bottom: 12px;
        .title {
          width: 98px;
          text-align: right;
          margin-right: 8px;
          color: #1990FE;
          flex-shrink: 0;
          font-size: 14px;
          &::after {
            content: '：';
          }
        }
        .content {
          font-size: 14px;
          color: #515563;
        }
      }
    }

    .base_img {
      .el-button--text{
        color:black;
      }
      margin-right: 20px;
      width: 175px;
      .base_img-item {
        width: 175px;
        height: 175px;
        cursor: pointer;
      }
      .base_img-name {
        padding: 10px 6px;
      }
      .base_img-time {
        font-size: 12px;
        padding: 0 6px 6px;
        color: #999;
      }
    }
  }
</style>
